<template>
    <section>
        <el-dialog
            :title="titleMap[mode]"
            v-model="visible"
            :width="1200"
            destroy-on-close
            @closed="$emit('closed')"
        >
            <el-form
                :disabled="mode == 'Show'"
                ref="dialogForm"
                label-width="100px"
                @keydown="handleKeydown"
            >
                <el-descriptions :column="4">
                    <el-descriptions-item
                        label="业务日期"
                    >{{entityObj.applyDate.length>10? entityObj.applyDate.slice(0, 10):entityObj.applyDate}}</el-descriptions-item>
                    <el-descriptions-item label="单据编号">{{entityObj.orderCode}}</el-descriptions-item>
                    <el-descriptions-item label="供应商">{{entityObj.supplierFullName}}</el-descriptions-item>
                    <el-descriptions-item label="审核人">{{entityObj.reviewed}}</el-descriptions-item>
                    <el-descriptions-item label="修改人">{{entityObj.updateName}}</el-descriptions-item>
                    <el-descriptions-item label="制单人">{{entityObj.documentsUser}}</el-descriptions-item>
                    <el-descriptions-item label="关联要货单">{{entityObj.applyOrderCode}}</el-descriptions-item>
                </el-descriptions>
                <el-table
                    :data="entityObj.items"
                    :border="true"
                    style="width: 100%"
                    show-summary
                    @row-click="rowClick"
                >
                    <el-table-column label="修改记录">
                        <template #default="scope">
                            <el-button
                                v-if="scope.row.receivingOrderLogs&& scope.row.receivingOrderLogs.length>0"
                                size="small"
                                @click="opChange(scope.row,scope.$index)"
                            >修改记录{{scope.row.receivingOrderLogs&&scope.row.receivingOrderLogs.length>0?"/"+scope.row.receivingOrderLogs.length:""}}</el-button>
                            <div v-else>无</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="物料名称" width="150" prop="materialName" ></el-table-column>
                    <el-table-column label="物料规格" width="150" prop="materialSpecs" ></el-table-column>
                    <el-table-column label="数量" width="100" prop="qty" ></el-table-column>
                    <el-table-column label="单位" width="150" prop="unitName" ></el-table-column>
                    <el-table-column label="押金费">
                        <template #default="scope">
                            <el-input
                                v-model="scope.row.totalAmount"
                                style="width: 100%"
                                :step="1"
                                controls-position="right"
                            ></el-input>
                        </template>
                    </el-table-column>
                
                    <el-table-column label="备注">
                        <template #default="scope">
                            <el-input
                                :id="'input_remark_'+scope.$index"
                                :ref="'input_remark_'+scope.$index"
                                v-model="scope.row.remarks"
                            />
                        </template>
                    </el-table-column>
                </el-table>
            </el-form>

            <!-- <el-form :model="entityObj" :rules="rules" :disabled="mode == 'Show'" ref="dialogForm" label-width="100px">

            </el-form>-->
            <template #footer>
                <div style="text-align: center;">
                    <el-button @click="visible = false">关 闭</el-button>
                    <el-button type="primary" v-if="mode != 'Show'" @click="submit()">保存</el-button>
                </div>
            </template>

            <change-dialog
                v-if="dialogChange"
                ref="changeDialog"
                @fatherMethod="opBindData"
                @success="handleSaveSuccess"
                @closed="dialogChange = false"
            ></change-dialog>
        </el-dialog>
    </section>
</template>

<script>
import tool from "@/utils/tool";
import changeDialog from "./changeLog";
export default {
    emits: ["success", "closed"],
    components: {
        changeDialog,
    },
    data() {
        return {
            mode: "Check",
            titleMap: {
                Check: "核对",
                Show: "制单列表物料明细",
            },
            visible: false,
            dialogChange: false,
            entityObj: {},
            rules: {},
            currentIndex: 0,
        };
    },
    methods: {
        //显示=
        open(mode = "Check") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        opChange(row) {
            this.dialogChange = true;
            this.$nextTick(() => {
                this.$refs.changeDialog.setData(row);
                this.$refs.changeDialog.open("Check");
            });
        },
        //表单注入数据
        async setData(data) {
            this.entityObj = data;
            try {
                const returnValue = await this.$API.auth.PostProcessApi.post(
                    "storage-order/deposit-fee-pages",
                    {
                        pageIndex: 1,
                        pageSize: 9999,
                        orderCodes: [data.orderCode],
                    }
                );
                if (returnValue.status == 200) {
                    this.entityObj.items = returnValue.response.data;
                } else {
                    this.$message.error("取详情失败:" + returnValue.msg);
                }
            } catch (error) {}
        },
        async submit() {
            const returnValue = await this.$API.auth.PostProcessApi.post(
                "storage-order/check-batch-deposit-fee",
                this.entityObj.items
            );
            if (returnValue.status == 200) {
                this.$message.success(returnValue.msg);
                this.$emit("fatherMethod");
                this.visible = false;
            } else {
                this.$message.error("操作失败:" + returnValue.msg);
            }
        },
        async rowClick(row) {
            const storageOrders = [this.entityObj];
            //获取行下标
            this.currentIndex = storageOrders.indexOf(row);
            console.log("获取行下标", this.currentIndex);
        },
        handleKeydown(event) {
            var idArr = event.target.id.split("_");
            var prefix = idArr[0] + "_" + idArr[1];
            const keyCode = event.keyCode || event.which;
            if (keyCode === 38) {
                // 上键

                if (this.currentIndex > 0) {
                    this.currentIndex--;
                    if (this.currentIndex <= 0) this.currentIndex = 0;
                    var findInputUp =
                        this.$refs[prefix + "_" + this.currentIndex];

                    this.$nextTick(() => {
                        if (findInputUp) {
                            findInputUp.focus();
                            const len = findInputUp.input.value.length * 2;
                            setTimeout(() => {
                                findInputUp.input.setSelectionRange(len, len);
                            }, 1);
                        }
                    });
                }
            } else if (keyCode === 40) {
                // 下键

                this.currentIndex++;
                if (this.currentIndex >= this.entityObj.storageOrders.length) {
                    this.currentIndex = this.entityObj.storageOrders.length - 1;
                }
                var findInputDown =
                    this.$refs[prefix + "_" + this.currentIndex];
                this.$nextTick(() => {
                    if (findInputDown) {
                        findInputDown.focus();
                    }
                });
            }
        },
    },
};
</script>

<style scoped>
</style>
